import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import './index.css';

interface HeaderProps {
  onMenuChange: (name: string) => void;
}

const Header: React.FC<HeaderProps> = ({
  onMenuChange
}) => {
  const location = useLocation();
  const handleClick = (name: string) => {
    onMenuChange(name);
  }
  const menuItems = [
    { name: 'layout', label: '布局', path: '/layout/grid' },
    { name: 'button', label: '按钮', path: '/button' },
    { name: 'text', label: '文本', path: '/text' },
    { name: 'image', label: '图片', path: '/image' },
    { name: 'other', label: '其他', path: '/others' }
  ];

  return (
    <header className="site-header">
      <h1 className="site-title">CSS 技巧</h1>
      <nav className="main-nav">
        <ul className="nav-list">
          {menuItems.map((item, index) => (
            <li key={index} className="nav-item">
              <Link
                to={item.path}
                className={`nav-link ${
                  location.pathname === item.path ? "active" : ""
                }`}
                onClick={() => handleClick(item.name)}
              >
                {item.label}
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    </header>
  );
};

export default Header;
